<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2022-08-29 18:59:59
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-02-01 23:44:28
 * @FilePath: \css_demos\web\css3动画\input输入框展开动画.html
 * @Description: input输入框展开动画
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input输入框展开动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    .mb20 {
      margin-bottom: 20px;
    }

    body {
      overflow: hidden;
      background: #222;
    }

    .input-box {
      position: relative;
      display: inline-block;
    }

    .input {
      padding: 0 40px 0 20px;
      width: 160px;
      height: 38px;
      font-size: 14px;
      border: 1px solid #eee;
      border-radius: 40px;
      background: #eee;
      transition: width 0.5s;
      -moz-transition: width 0.5s;
      -webkit-transition: width 0.5s;
      -o-transition: width 0.5s;
      transition-delay: 0.1s;
      -moz-transition-delay: 0.1s;
      -webkit-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
    }

    .span {
      position: absolute;
      top: 4px;
      right: 5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0;
      color: #969696;
      text-align: center;
      background: #222;
      border-radius: 50%;
      font-size: 15px;
      cursor: pointer;
    }

    .input:focus {
      transition-delay: 0s;
      -moz-transition-delay: 0s;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      width: 280px;
      outline: none;
      box-shadow: none;
    }

    .input:focus + .span {
      background-color: pink;
      color: #fff;
    }

    /* 第二个 */
    /* 设置水平垂直居中 */

    .btn-box {
      width: auto;
      min-width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 25px;
      color: #fff;
      background-image: linear-gradient(315deg, #6772ff 0, #00f9e5 100%);
      background-size: 104% 104%;
      cursor: pointer;
      position: relative;

      display: inline-block;
    }

    .btn-box span {
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
    }

    .btn-box input {
      width: 50px;
      height: 50px;
      line-height: 50px !important;
      padding-left: 20px;
      font-size: 16px;
      color: #fff;
      transition: all 0.3s ease-in-out;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: 5px;
      vertical-align: 4px;
    }
    .btn-box:hover input,
    .btn-box input:not(:placeholder-shown) {
      width: 160px;
      padding-right: 50px;
    }

    .btn-box:hover input ::-webkit-input-placeholder {
      opacity: 0.8;
      color: #fff;
    }

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #999;
      font-size: 10px;
    }

    /* 第三个 */
    .input-boxLine {
      position: relative;
      width: 160px;
      height: 40px;
      margin-top: 10px;
    }

    .input-boxLine input {
      width: 100%;
      height: 100%;
      border: none;
      font-size: 17px;
      border-bottom: 1px solid #afaebd;
      color: #fff;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: 5px;
    }

    .input-boxLine span {
      position: absolute;
      bottom: 10px;
      left: 0px;
      color: #afaebd;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .input-boxLine .line {
      position: absolute;
      bottom: 0px;
      height: 2px;
      width: 100%;
      background-color: #ffaa7f;
      transform: scaleX(0);
      transition: all 0.3s ease;
    }

    .input-boxLine input:focus ~ span,
    .input-boxLine input:valid ~ span {
      top: -10px;
      font-size: 12px;
      color: #ffaa7f;
      font-style: oblique;
    }

    .input-boxLine input:focus ~ .line,
    .input-boxLine input:valid ~ .line {
      transform: scaleX(1);
    }

    /* ::-webkit-input-placeholder {
			text-overflow: ellipsis
		}
		
		@keyframes highlight {
		
			0%,
			100% {
				background-color: transparent
			}
		
			20%,
			80% {
				background-color: #D4D9FF
			}
		}
		
		:focus:not(:focus-visible) {
			outline: 0
		}
		
		input:focus,
		textarea:focus {
			outline: 0
		}
		
		input::-ms-clear {
			display: none
		} */
  </style>

  <body>
    <div>
      <section>
        <div class="input-box mb20">
          <input type="text" class="input" />
          <span class="span">搜</span>
        </div>
      </section>
      <section>
        <div class="btn-box mb20">
          <span>搜</span>
          <input type="text" placeholder=" " />
        </div>
      </section>
      <section>
        <div class="input-boxLine" data-span="苏苏小苏苏">
          <input type="text" required />
          <!-- required 属性规定必需在提交之前填写输入字段。 -->
          <div class="line"></div>
          <span>请输入搜索内容</span>
        </div>
      </section>
    </div>
  </body>
</html>
